var FormEditable = function () {

    $.mockjaxSettings.responseTime = 500;

    var log = function (settings, response) {
        var s = [],
            str;
        s.push(settings.type.toUpperCase() + ' url = "' + settings.url + '"');
        for (var a in settings.data) {
            if (settings.data[a] && typeof settings.data[a] === 'object') {
                str = [];
                for (var j in settings.data[a]) {
                    str.push(j + ': "' + settings.data[a][j] + '"');
                }
                str = '{ ' + str.join(', ') + ' }';
            } else {
                str = '"' + settings.data[a] + '"';
            }
            s.push(a + ' = ' + str);
        }
        s.push('RESPONSE: status = ' + response.status);

        if (response.responseText) {
            if ($.isArray(response.responseText)) {
                s.push('[');
                $.each(response.responseText, function (i, v) {
                    s.push('{value: ' + v.value + ', text: "' + v.text + '"}');
                });
                s.push(']');
            } else {
                s.push($.trim(response.responseText));
            }
        }
        s.push('--------------------------------------\n');
        $('#console').val(s.join('\n') + $('#console').val());
    }

    var initAjaxMock = function () {
        //ajax mocks

        $.mockjax({
            url: '/post',
            response: function (settings) {
                log(settings, this);
            }
        });

        $.mockjax({
            url: '/error',
            status: 400,
            statusText: 'Bad Request',
            response: function (settings) {
                this.responseText = 'Please input correct value';
                log(settings, this);
            }
        });

        $.mockjax({
            url: '/status',
            status: 500,
            response: function (settings) {
                this.responseText = 'Internal Server Error';
                log(settings, this);
            }
        });

        $.mockjax({
            url: '/groups',
            response: function (settings) {
                this.responseText = [{
                    value: 0,
                    text: 'Guest'
                }, {
                    value: 1,
                    text: 'Service'
                }, {
                    value: 2,
                    text: 'Customer'
                }, {
                    value: 3,
                    text: 'Operator'
                }, {
                    value: 4,
                    text: 'Support'
                }, {
                    value: 5,
                    text: 'Admin'
                }
                ];
                log(settings, this);
            }
        });

        $.mockjax({
            url: '/CustomerStatus',
            response: function (settings) {
                this.responseText = [{
                    value: 1,
                    text: 'Active'
                }, {
                    value: 0,
                    text: 'InActive'
                }
                ];
                log(settings, this);
            }
        });

        $.mockjax({
            url: '/SubmittedByEmployeeList',
            response: function (settings) {
                this.responseText = [{
                    value: 1,
                    text: 'Employee 1'
                }, {
                    value: 2,
                    text: 'Employee 2'
                }, {
                    value: 3,
                    text: 'Employee 3'
                }
                ];


               //  {"items":[{"text":"Employee 01","value":"1"},{"text":"Employee 02","value":"2"},{"text":"Employee 03","value":"3"}]}


                log(settings, this);
            }
        });

    }

    var initEditables = function () {

         //set editable mode based on URL parameter
         //if (Metronic.getURLParameter('mode') == 'inline') {
         //    $.fn.editable.defaults.mode = 'inline';
         //    $('#inline').attr("checked", true);
         //    jQuery.uniform.update('#inline');
         //} else {
         //    $('#inline').attr("checked", false);
         //    jQuery.uniform.update('#inline');
         //}

        //global settings 
        //$.fn.editable.defaults.mode = 'inline';
        $.fn.editable.defaults.inputclass = 'form-control';
        $.fn.editable.defaults.url = '/post';

        //editables element samples 
        //$('#myEditableForm').editable({
        //    url: '/post',
        //    type: 'text',
        //    pk: 1,
        //    name: 'username',
        //    title: 'Enter username'
        //});

        //$('#LeadName').editable({
        //    url: '/Sales/Lead/SaveLeadName',
        //    validate: function (value) {
        //        if ($.trim(value) == '') return 'This field is required';
        //    }
        //});

        //$('#LeadValue').editable({
        //    url: '/Sales/Lead/SaveLeadValue',
        //    validate: function (value) {
        //        if ($.trim(value) == '') return 'This field is required';
        //    }
        //});
        
        //$('#PocFullName').editable({
        //    url: '/Sales/Lead/PocFullName',
        //    value: {
        //        fname: "John",
        //        mname: "Poc",
        //        lname: "Doe"
        //    },
        //    validate: function (value) {
        //        if (value.city == '') return 'city is required!';
        //    },
        //    display: function (value) {
        //        if (!value) {
        //            $(this).empty();
        //            return;
        //        }
        //        var html = $('<div>').text(value.fname).html() + ' ' + $('<div>').text(value.mname).html() + ' ' + $('<div>').text(value.lname).html();
        //        //var html = '<b>' + $('<div>').text(value.city).html() + '</b>, ' + $('<div>').text(value.street).html() + ' st., bld. ' + $('<div>').text(value.building).html();
        //        $(this).html(html);
        //    }
        //});
        
        //$('#AccountNo').editable({
        //    validate: function (value) {
        //        if ($.trim(value) == '') return 'This field is required';
        //    }
        //});

        //$('#PocAddress').editable({
        //    url: '/post',
        //    value: {
        //        address1: "1077 Central Pkwy",
        //        address2: "S #600",
        //        city: "San Antonio",
        //        state: "TX",
        //        zip: "78232",
        //        country: "United States"
        //    },
        //    validate: function (value) {
        //        if (value.city == '') return 'city is required!';
        //    },
        //    display: function (value) {
        //        if (!value) {
        //            $(this).empty();
        //            return;
        //        }
        //        var html = $('<div>').text(value.address1).html() + ' ' + $('<div>').text(value.address2).html() + ', ' + $('<div>').text(value.city).html() + ', ' + $('<div>').text(value.state).html() + ', ' + $('<div>').text(value.zip).html() + ', ' + $('<div>').text(value.country).html();
        //        //var html = '<b>' + $('<div>').text(value.city).html() + '</b>, ' + $('<div>').text(value.street).html() + ' st., bld. ' + $('<div>').text(value.building).html();
        //        $(this).html(html);
        //    }
        //});

        //$('#CompanyName').editable({
        //    validate: function (value) {
        //        if ($.trim(value) == '') return 'This field is required';
        //    }
        //});

        //$('#CompanyAddress').editable({
        //    url: '/post',
        //    value: {
        //        address1: "1077 Central Pkwy",
        //        address2: "S #600",
        //        city: "San Antonio",
        //        state: "TX",
        //        zip: "78232",
        //        country: "United States"
        //    },
        //    validate: function (value) {
        //        if (value.city == '') return 'city is required!';
        //    },
        //    display: function (value) {
        //        if (!value) {
        //            $(this).empty();
        //            return;
        //        }
        //        var html = $('<div>').text(value.address1).html() + ' ' + $('<div>').text(value.address2).html() + ', ' + $('<div>').text(value.city).html() + ', ' + $('<div>').text(value.state).html() + ', ' + $('<div>').text(value.zip).html() + ', ' + $('<div>').text(value.country).html();
        //        //var html = '<b>' + $('<div>').text(value.city).html() + '</b>, ' + $('<div>').text(value.street).html() + ' st., bld. ' + $('<div>').text(value.building).html();
        //        $(this).html(html);
        //    }
        //});

        //$('#PrimaryEmail').editable({
        //    validate: function (value) {
        //        if ($.trim(value) == '') return 'This field is required';
        //    }
        //});

        //$('#SecondaryEmail').editable({
        //    validate: function (value) {
        //        if ($.trim(value) == '') return 'This field is required';
        //    }
        //});

        //$('#PrimaryPhone').editable({
        //    validate: function (value) {
        //        if ($.trim(value) == '') return 'This field is required';
        //    }
        //});

        //$('#SecondaryPhone').editable({
        //    validate: function (value) {
        //        if ($.trim(value) == '') return 'This field is required';
        //    }
        //});

        //$('#status').editable({
        //    //prepend: "not selected",
        //    inputclass: 'form-control',
        //    source: [{
        //        value: 1,
        //        text: 'Active'
        //    }, {
        //        value: 2,
        //        text: 'In-Active'
        //    }
        //    ],
        //    display: function (value, sourceData) {
        //        var colors = {
        //            "": "gray",
        //            1: "green",
        //            2: "red"
        //        },
        //            elem = $.grep(sourceData, function (o) {
        //                return o.value == value;
        //            });

        //        if (elem.length) {
        //            $(this).text(elem[0].text).css("color", colors[value]);
        //        } else {
        //            $(this).empty();
        //        }
        //    }
        //});

        //$('#SubmittedByEmployeeName').editable({
        //    showbuttons: false,
        //    validate: function (value) {
        //        if ($.trim(value) == '') return 'This field is required';
        //    }
        //});
        
        //$('#InsideSalesEmployeeName').editable({
        //    showbuttons: false,
        //    validate: function (value) {
        //        if ($.trim(value) == '') return 'This field is required';
        //    }
        //});

        //$('#DateGrabbed').editable({
        //    rtl: Metronic.isRTL()
        //});

        //$('#SubmittedDate').editable({
        //    rtl: Metronic.isRTL()
        //});

        //$('#ExpectedClosingDate').editable({
        //    rtl: Metronic.isRTL()
        //});
    }

    return {
        //main function to initiate the module
        init: function () {

            // inii ajax simulation
            initAjaxMock();

            // init editable elements
            initEditables();

            // init editable toggler
            $('#enable').click(function () {
                $('#user .editable').editable('toggleDisabled');
            });

            // init 
            $('#inline').on('change', function (e) {
                if ($(this).is(':checked')) {
                    window.location.href = 'Cm-ViewCustomer.html?mode=inline';
                } else {
                    window.location.href = 'Cm-ViewCustomer.html';
                }
            });

            // handle editable elements on hidden event fired
            $('#user .editable').on('hidden', function (e, reason) {
                if (reason === 'save' || reason === 'nochange') {
                    var $next = $(this).closest('tr').next().find('.editable');
                    if ($('#autoopen').is(':checked')) {
                        setTimeout(function () {
                            $next.editable('show');
                        }, 300);
                    } else {
                        $next.focus();
                    }
                }
            });


        }

    };

}();